function Enlarge(dom){
    this.container = document.querySelector(dom)

    this.show = this.container.querySelector('.show')
    this.mask = this.container.querySelector('.mask')
    this.btns = this.container.querySelectorAll('.btns > div')
    this.enlarge = this.container.querySelector('.enlarge')

    this.maskWidth = parseFloat(getComputedStyle(this.mask).width)
    this.maskHeight = parseFloat(getComputedStyle(this.mask).height)
    // this.showWidth = parseInt(getComputedStyle(this.show).width)
    // this.showHeight = parseInt(getComputedStyle(this.show).height)

    this.bindBtnsClick()//点击小图片大图片切换
    this.enterOrLeaveShow()//鼠标移入移出，mask 显示与隐藏
    this.moveMask()
}
//点击小图片大图片切换
Enlarge.prototype.bindBtnsClick = function(){
    this.btns.forEach(btn => {
        btn.addEventListener('click',() => {
            // this.show.style.img.src = `${li.dataset.src}`
            // console.log(li.data.enlarge.src);
            // 
            {
                this.btns.forEach(btns => {
                    btns.classList.remove('active')
                })
            }
            btn.classList.add('active')

            this.show.querySelector('img').src = `${btn.dataset.src}`
            this.enlarge.style.backgroundImage = `url(${btn.dataset.enlargeSrc})`

        })
    })
}
//鼠标移入移出，mask 显示与隐藏
Enlarge.prototype.enterOrLeaveShow = function(){
    this.show.addEventListener('mouseout',() => {
        this.mask.style.display = 'none'
        this.enlarge.style.display = 'none'
    })
    this.show.addEventListener('mouseover',() => {
        this.mask.style.display = 'block'
        this.enlarge.style.display = 'block'
    })
    
}
//mask 跟随鼠标移动
Enlarge.prototype.moveMask = function(){
    let X = 0
    let Y = 0
    this.show.addEventListener('mousemove',e => {
        // console.log(e);
        const showWidth = this.show.offsetWidth
        const showHeight = this.show.offsetHeight
        this.MaxWidth = showWidth - this.maskWidth
        this.MaxHeight = showHeight - this.maskHeight
        X = e.pageX - this.container.offsetTop - this.maskWidth / 2
        Y = e.pageY - this.container.offsetLeft - this.maskHeight / 2
        // console.log(this.container.offsetLeft,this.container.offsetTop);
        if(X < 0){
            X = 0
        }else if(X > this.MaxWidth){
            X = this.MaxWidth
        }
        if(Y < 0){
            Y = 0
        }else if(Y > this.MaxHeight){
            Y = this.MaxHeight
        }
        this.mask.style.top = Y + 'px'
        this.mask.style.left = X + 'px'

        /*
            mask移动的位置              小图片的大小   
            -------------       ==      -----------
            enlarge移动的位置           大图片的大小

            enlarge移动的位置 == mask移动的位置 * 大图片的大小 / 小图片的大小 
        */
            // [ bigWidth , bigHeight]
        const [ bigWidth , bigHeight] = getComputedStyle(this.enlarge).backgroundSize.split(' ').map(num => parseFloat(num))
        // console.log(bigWidth , bigHeight);

        const enlargeWidth = X * bigWidth / showWidth
        const enlargeHeight = Y * bigHeight / showHeight
        this.enlarge.style.backgroundPosition = `-${enlargeWidth}px -${enlargeHeight}px`

    })
}



export default Enlarge